iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

JavaScript 筆記 2 版系列 第 28

JavaScript Day28 - HTTP 網路請求

  • 分享至 

  • xImage
  •  

網路請求

之前在 AJAX 時提到了不少用法,其實請求的方法有不少,傳遞的資料也有不同,如果前後端分離,兩者其實就是用 API 溝通,因此做個紀錄

  • 前面的筆記
  • method:請求的方法
    • GET:取得資料,參數或資料會直接在網址上,如取得一般資料
    • POST:提交(新增)資料,參數或資料不會在網址上,如建立訂單資料
    • PATCH:修改部分資料,如修改訂單資料
    • PUT:修改全部資料,如修改整筆訂單資料
    • DELECT:刪除資料,如刪除訂單資料
  • content-type:對於 post 主要有這幾種傳遞資料的種類
    • application/x-www-form-urlencoded:一般的 form 表單送出的方式
    • application/json:主要是送出 JSON 格式的資料
    • multipart/form-data:當要傳送檔案的時候
    • text/plain:一般的文字

fetch

// post
const url = '';  // API url
const data = {
  "name": name.value,
  "password": password.value
}; // JSON data

fetch(url,{
  method:'POST', // 依需求更換 method
  body:JSON.stringify(data), // 依需求調整格式
  headers: {'Content-Type': 'application/json'}  // 依需求調整格式
  }).then() // function
// 假設有一個 form 的上傳表單
let formData = new FormData();
let fileField = document.querySelector("input[type='file']");

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

// fetch post
fetch('https://example.com/profile/avatar', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

axios

let url = 'https://apiurl';
let data = {
    // JSON data
};

//請求表頭
let headers = {
    "Content-Type": "application/json"
};

// post
axios({
    method: 'post',
    url: url,
    data: data,
    headers: headers
})

參考資料

MDN HTTP 請求方法
MDN Content-Type
MDN Using Fetch
[第四週] 網路基礎 - HTTP、Request、Response
AJAX 完整解說系列:新增、更新、刪除(POST/PATCH/DELETE)
JavaScript基本功修練:Day29 - axios基本語法與練習(GET、POST請求)
axios 基本使用 & Config
Fetch & Promise 筆記五(Fetch 的使用注意事項)
RESTful API 練習 (XHR, Fetch詳解)
API 是什麼? RESTful API 又是什麼?

次回

做個此次系列的相關資料補充


上一篇
JavaScript Day27 - IIFE (立即函式)
下一篇
JavaScript Day29 - other
系列文
JavaScript 筆記 2 版31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
juck30808
iT邦研究生 1 級 ‧ 2021-10-14 12:11:45

恭喜即將邁入完賽~/images/emoticon/emoticon08.gif

hokou iT邦好手 1 級 ‧ 2021-10-14 13:52:45 檢舉

感謝鼓勵,謝謝!

我要留言

立即登入留言